<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../static/bootstrap-3.4.1/dist/css/bootstrap.min.css">
    <script src="../static/jQuery-v3.6.0/jQueryv3.6.0.js"></script>
    <script src="../static/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <ul class="media-list">
            <li class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="https://atts.w3cschool.cn/attachments/uploads/2014/06/64.jpg"
                        alt="通用的占位符图像">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">媒体标题</h4>
                    <p>这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。</p>
                    <!-- 嵌套的媒体对象 -->
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="https://atts.w3cschool.cn/attachments/uploads/2014/06/64.jpg"
                                alt="通用的占位符图像">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">嵌套的媒体标题</h4>
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            <!-- 嵌套的媒体对象 -->
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="media-object"
                                        src="https://atts.w3cschool.cn/attachments/uploads/2014/06/64.jpg"
                                        alt="通用的占位符图像">
                                </a>
                                <div class="media-body">
                                    <h4 class="media-heading">嵌套的媒体标题</h4>
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 嵌套的媒体对象 -->
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="https://atts.w3cschool.cn/attachments/uploads/2014/06/64.jpg"
                                alt="通用的占位符图像">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">嵌套的媒体标题</h4>
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                        </div>
                    </div>
                </div>
            </li>
            <hr/>
            <hr/>
            <li class="media">
                <a class="pull-right" href="#">
                    <img class="media-object" src="https://atts.w3cschool.cn/attachments/uploads/2014/06/64.jpg"
                        alt="通用的占位符图像">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">媒体标题</h4>
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                </div>
            </li>
        </ul>
    <div>
</body>

</html>